<template>
    <div class="skill-detail f f-ac f-col">
        <Breadcrumb router />
        <div class="skill-detail-body">
            <div class="body-top">
                <Title :label="detail.titile" :time="detail.createtime" />
                <div class="f f-ac f-jb mt-20">
                    <img :src="baseUrl+detail.image" class="detail-img" />
                    <div class="detail-info f f-col f-jb">
                        <div class="row" v-if="detail.admin[0]">所属单位：{{ detail.admin[0].name || "-" }}</div>
                        <div class="row">报名时间：{{ detail.application_start_time || "-" }}</div>
                        <div class="row">开课时间：{{ detail.train_start_time || "-" }}}</div>
                        <div class="row" v-if="detail.admin[0]">咨询电话：{{ detail.admin[0].phone|| "-" }}</div>
                        <div class="row">培训地址：{{ detail.address || "-" }}</div>
                    </div>
                </div>
            </div>
            <div>
                <Sign-form title="培训名称" :titleContent="detail.title" @signForm="handleSign"/>
            </div>
        </div>
    </div>
</template>

<script>
    import SignForm from "@/components/SignForm";
    import {
        learnApplication
    } from "@/utils/learning/index.js";
    export default {
        components: {
            SignForm
        },
    
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                detail: {},
                signForm: {},
            };
        },

        created() {
            this.detail = JSON.parse(this.$route.query.detail)
        },

        methods: {
            // 点击报名
            handleSign(v) {
                let that = this
                v.train_lists_id = that.detail.id,
                learnApplication(v).then((response) => {
                    if (response.code == 200) {
                        that.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        window.history.go(-1);
                    }
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .skill-detail {
        width: 100%;

        &-body {
            width: 1200px;

            .body-top {
                width: 100%;
                height: 439px;
                box-sizing: border-box;
                padding: 30px 0;
                border-bottom: 1px solid rgba(70, 110, 197, 0.2);

                .detail-img {
                    width: 633px;
                    height: 296px;
                }

                .detail-info {
                    width: 413px;
                    height: 245px;

                    .row {
                        color: #000;
                        font-size: 18px;
                        line-height: 22px;
                        position: relative;

                        &::before {
                            content: "";
                            position: absolute;
                            left: -5px;
                            display: inline-block;
                            width: 3px;
                            height: 22px;
                            background-color: rgba(70, 110, 197, 0.2);
                        }
                    }
                }
            }
        }
    }
</style>